<template>
    <div>
        <h3>{{photo.title}}</h3>
        <p>
            <span>发表时间：{{photo.add_time|dataFormat}}</span>
            <span>点击：{{photo.click}}</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumb-img-list">
            <img :src="item.src" v-for="(item,i) in photolist" :key="i">
        </div>
        <!-- 内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 评论子组件 -->
        <comment :newsid="id"></comment>
    </div>
</template>

<script>

import comment from '../sub-components/Comment.vue'

export default {
    data() {
        return {
            photoinfo:[],
            photolist:[]//缩略图的数组
        }
    },
    methods: {
     async   getPhotoInfo(){
        //  结果的返回值为promise时可以使用async和await
          const {data} =await this.$http.get('/api/getimageinfo/'+this.id)
          if(data.status===0)return(this.photoinfo=data.message[0])
        },
        async getThumbImg(){
            //    获取图片缩略图数据
               const {data} =await this.$http.get("/api/getthumbimages/"+this.id)
                if(data.status===0) {
                    data.message.forEach(item=>{
                        item.w=600
                        item.h=400
                    })
                    this.photolist=data.message
                }
        }
    },
    created() {
        this.getPhotoInfo()
        this.getThumbImg()
    },
    props:['id'],
    components:{
        comment
    }
}
</script>

<style lang="less" scoped>
.thumb-img-list{
    img{
        margin: 10px;
        box-shadow: 0 0 7px gray;
    }
}
</style>